<template>
  <div class="flex-center w-p-100 h-p-100">
    <Light></Light>
    <div class="h-p-100 ml-10 flex flex-col justify-end pb-10">
        <div :style="valueStyle" class="fz-20 text-bold">{{ value }}</div>
        <div :style="titleStyle" class="fz-12">{{ title }}</div>
    </div>
  </div>
</template>

<script setup>
import Light from "../icons/ligth.vue";
const porp = defineProps({
    value: {
        Type: Number | String,
        default: ''
    },
    title: {
        Type: String,
        default: ''
    },
    valueStyle: {
        Type: Object,
        default: () => {
            return {
                color: '#43E7FF',
                fontSize: '20px'
            }
        }
    },
    titleStyle: {
        Type: Object,
        default: () => {
            return {
                color: '#BAFBFF',
                fontSize: '12px'
            }
        }
    },
})
</script>

<style scoped>
</style>